<template>
  <div style="padding: 20px">
    <el-card class="box-card" style="margin:0 auto;">
      <div slot="header" class="clearfix">
        <span>课程管理 >> 批量缴费</span>
      </div>

      <div class="title" >缴费成员:  <el-tag v-for="(tag) in initParam.param" :key="tag.id">{{ tag.name }}</el-tag></div>
      <div class="line"/>

      <!-- <div class="title" >单价:{{ initParam.param[0].price }}</div> -->
      <!--<div class="title" >人数:{{ initParam.param.length }}</div>-->
      <!-- <div class="title" >课时数:{{ initParam.param[0].courseCount }}</div> -->
      <!-- <div class="title" >课程单价:{{((initParam.param[0].price)* (initParam.param[0].courseCount)).toFixed(2) }}</div> -->
      <!--<div class="title" >总单价:{{ initParam.totalPrice }}</div>-->
      <!--<div class="title" >总单价:{{initParam.param.length * initParam.param[0].price }}</div>-->
      <!-- <div class="title" >总单价:{{ ((initParam.param.length )* ((initParam.param[0].  price)* (initParam.param[0].courseCount))).toFixed(2) }}</div> -->
      <div class="title" >课程价格:{{ initParam.param[0].price }}</div>
      <div class="title" >选择支付方式:
        <el-button type="success" size="mini" plain @click="wxPayWindows">微信支付</el-button>
        <el-button type="success" size="mini" plain @click="offlinePayWindows">线下支付</el-button>
      </div>

      <!-- 添加或修改对话框 -->
      <el-dialog :visible.sync="dialogFormVisible" title="线下支付">
        <el-form

          :rules="rules"
          status-icon
          label-position="left"
          label-width="100px"
          style="width: 400px; margin-left:50px;">
          <div>
            ①企业：企业向下方账户转账，并上传转账凭证
            <br>
            ②明德财务：审核钱是否到账，到账审核通过
            <br>
            ③用户：审核通过后，学员可在手机端完成课程学习
          </div>
          <br>
          <div v-if="listOrganization!==undefined">
            <div class="title">开户行: {{ listOrganization.bankName }}</div>
            <div class="title">账户名: {{ listOrganization.bankNoName }}</div>
            <div class="title">账号: {{ listOrganization.bankNo }}</div>
          </div>

          <el-form-item label="转账凭证" prop="payEvidence">
            <el-upload
              :headers="headers"
              :action="uploadPath"
              :show-file-list="false"
              :on-success="uploadPicUrl"
              class="avatar-uploader"
              accept=".jpg,.jpeg,.png,.gif">
              <img v-if="payEvidence" :src="payEvidence" width="80px" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"/>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <!--<el-button type="primary" @click="offlinePayVerify">确定</el-button>-->
          <el-button size="mini" type="primary" @click="offlinePayFun">确定</el-button>
        </div>
      </el-dialog>

      <!-- 微信付款码 -->
      <el-dialog :visible.sync="dialogFormVisibleWxPayQR" @close="closeDialog" :close-on-click-modal="false" title="微信付款码">
        <div style="width: 200px;margin:0 auto;">
          <!--<img :src=" process.env.BASE_API+ '/native/pay?orderId='+ wxPayParam.orderId +''" style="width: 150px">-->
          <img :src="'http://md.rl716.com/admin' + '/native/pay?orderId='+ wxPayParam.orderId +''" style="width: 150px">
        </div>
      </el-dialog>



    </el-card>
  </div>
</template>

<style>
  .constant{
    width: 100%;
  }
  .img{
    margin-top: 20px;
    width: 150px;
    height: 150px;
  }
  .img img{
    width: 100%;
    height: 100%;
  }
  .list{
    width: 100%;
  }
  .list-cell{
    width: 100%;
    line-height: 50px;
  }
  .cell{
    width: 100%;
    /*display: inline-flex;*/
  }
  .set{
    color: deepskyblue;
  }
  .line{
    width: 100%;
    border-bottom: 2px solid #f6f6f6;
    margin-bottom: 5px;
  }
  .erweima{
    width: 100%;
    border-bottom: 2px solid #f6f6f6;
  }
  .text {
    font-size: 14px;
  }

  .title {
    margin: 0px auto 20px auto;
    /*text-align: center;*/
    font-weight: bold;
  }
  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 600px;
  }
</style>

<script>
import { readOrganization, offlinePay, wxPay, nativePay,wxRes } from '@/api/companyOperate'
import { uploadPath } from '@/api/storage'
import { getToken } from '@/utils/auth'
import Pagination from '@/components/Pagination'
import TagsView from '../layout/components/TagsView' // Secondary package based on el-pagination

export default {
  name: 'CompleteBatchOrder',
  components: { TagsView, Pagination },
  data() {
    return {
      uploadPath,
      countDown:'',
      num:0,
      initParam: {
        param: undefined,
        totalPrice: undefined
      },
      offlinePayParam: {
        studentsList: undefined,
        payEvidence: undefined
      },
      wxPayParam: {
        studentId: undefined,
        orderId: undefined
      },
      studentsList: undefined,
      listOrganization: undefined,
      list: undefined,
      listLoading: true,
      dialogFormVisible: false,
      downloadLoading: false,
      payEvidence: undefined, // 转账凭证
      rules: {
        payEvidence: [
          { required: true, message: '转账凭证不能为空', trigger: 'blur' }
        ]
      },
      dialogFormVisibleWxPayQR: false,
      wxPayQR: undefined // 微信二维码
    }
  },
  computed: {
    headers() {
      return {
        'X-Litemall-Admin-Token': getToken()
      }
    }
  },
  destroyed(){
    clearInterval(this.countDown)
  },
  created() {
    const ddata = this.$route.query.param
    this.initParam.param = JSON.parse(ddata)
    // 计算总金额
    // var totalPrice = 0
    // for (var i in this.initParam.param) {
    //   totalPrice += this.initParam.param[i].price
    // }
    // this.initParam.totalPrice = totalPrice
    this.getOrganization()
  },
  methods: {
    uploadPicUrl: function(response) {
      this.payEvidence = response.data.url
    },
    offlinePayWindows() {
      this.dialogFormVisible = true
    },
    wxPayWindows() {
      // this.dialogFormVisibleWxPayQR = true
      
      this.wxPayFun()
    },
    closeDialog(){
      clearInterval(this.countDown);
    },
    wxResponse(id){
      this.num = 0;
      this.countDown = setInterval(()=>{
          this.num++
          let that = this;
          let data = {
            orderId: id
          }
          wxRes(data)
            .then(response => {
              console.log(response)
              if(response.data.data == 1){
                that.dialogFormVisibleWxPayQR =false;
                clearInterval(that.countDown)
                that.getOrderInfo();
                this.$message({
                type: 'success',
                message: '订单支付成功'
              })
              }
              // 
            })
            .catch(() => {
              
            })
      },1000)
      if(this.num == 300){
        clearInterval(this.countDown)
        alert('支付已过期请重新支付')
        this.dialogFormVisibleWxPayQR = false
        
      }

    },
    getOrganization() {
      readOrganization()
        .then(response => {
          this.listOrganization = response.data.data
        })
        .catch(() => {
          this.listOrganization = undefined
        })
    },
    offlinePayVerify() {
      this.$confirm('请确认是否已转账，并上传凭证？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.offlinePayFun()
          .then(response => {
            this.$message({
              type: 'success',
              message: '创建订单成功，请联系明德财务!'
            })
          })
          .catch(() => {
            this.$message({
              type: 'success',
              message: '创建订单失败，请联系明德财务!'
            })
          })// 创建订单
      })
    },
    offlinePayFun() {
      if (this.payEvidence == null || this.payEvidence === undefined || this.payEvidence === '') {
        this.$confirm('请确认是否已转账，并上传凭证？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } else {
        this.studentsList = this.initParam.param
        for (let i = 0; i < this.studentsList.length; i++) {
          this.studentsList[i].iconUrl = this.payEvidence
        }
        offlinePay(this.studentsList)
          .then(response => {
            const idCard = response.data.data.id
            for (let i = 0; i < this.studentsList.length; i++) {
              this.studentsList[i].idCard = idCard
            } // 得到创建的订单Id
            this.dialogFormVisible = false
            // 跳转订单页面
            this.getOrderInfo()
            this.$notify.success({
              title: '成功',
              message: '创建成功'
            })
          })
          .catch(response => {
            this.$notify.error({
              title: '失败',
              message: response.data.message
            })
          })
      }
    },
    wxPayFun() {
      wxPay(this.initParam.param)
        .then(response => {
          this.wxPayParam.orderId = response.data.data.id
          this.dialogFormVisibleWxPayQR = true
          this.wxResponse(this.wxPayParam.orderId);
          // this.wxPayQR: process.env.BASE_API + '/storeSet/storeQrCode?shopInviteCode='
          // this.nativePay() // 调用生成二维码接口
          // this.$notify.success({
          //   title: '成功',
          //   message: '创建成功'
          // })
        })
        .catch(response => {
          this.$notify.error({
            title: '创建订单失败',
            message: response.data.errmsg
          })
        })
    },
    getOrderInfo() {
      this.$router.push({ path: '/companyOperateManage/companyOrder' })
    },
    nativePay() {
      nativePay(this.wxPayParam)
      this.dialogFormVisibleWxPayQR = true
      // .then(response => {
      //   this.wxPayQR = response
      //   this.dialogFormVisibleWxPayQR = true
      //   this.$notify.success({
      //     title: '成功',
      //     message: '生成付款码成功'
      //   })
      // })
      // .catch(response => {
      //   this.$notify.error({
      //     title: '生成付款码失败',
      //     message: response.data.errmsg
      //   })
      // })
    }
  }
}
</script>
